<template>
  <div>
    <div class="grid-container">
      <div @click="toours" class="toptitle">关于我们</div>
    </div>
    <!-- <div class="grid-container">
      <div @click="toplaza" class="toptitle">学习广场</div>
    </div>
    <div class="grid-container">
      <div @click="tocourse" class="toptitle">我的课程</div>
    </div> -->
    <yao />
    <Project />
    <more />
  </div>
  <div class="footer">
    <div>
      <span>企业服务</span>
      <span @click="toours">关于我们</span>
      <span>联系我们</span>
      <span>帮助中心</span>
      <span>意见反馈</span>
    </div>
    <p>&copy;2024 wang.club 版权所有 粤ICP备20054546号-1</p>
  </div>
</template>

<script setup>
  import { ref, inject } from 'vue';
  import { useRouter } from 'vue-router';
  import yao from '@/components/home-page/yao.vue';
  import Project from '@/components/home-page/project.vue';
  import more from '@/components/home-page/more.vue';

  // 使用 inject 钩子来获取通过 provide 提供的 showNavItem  
  const showNavItem = inject('showNavItem');
  const aboutitem = inject('aboutitem');
  // 使用 useRouter 钩子来获取路由实例  
  const router = useRouter();

  // 定义一个方法，用于导航到 '/front' 并显示导航项  
  const showNewNav = () => {
    router.push('/front');
    // 因为 showNavItem 本身就是一个 ref，所以直接设置其 value  
    if (showNavItem) {
      showNavItem.value = true;
    }
  };
  function toours() {
    aboutitem.value = true;
    router.push('/aboutview');
  }
  function tocourse() {
    // aboutitem.value = true;
    router.push('/mycourse');
  }
  function toplaza() {
    // aboutitem.value = true;
    router.push('/learnplaza');
  }

</script>
<style scoped>
  .toptitle {
    color: #144cdb;
    background-color: #828384;
    /* 移除左右的外边距 */
    margin: 15px 0;
    padding: 0 15px;
    /* 添加内边距以代替外边距，用于空间 */
    text-align: center;
    line-height: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-block;
  }

  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 30px;
  }

  .home img {
    width: 30%;
    height: 70%;
  }

  .footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 150px;
    /* 改为小写 px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    /* 改为小写 px */
    color: #999;
    background-color: #847f7f4b;
  }

  .footer p {
    width: 100%;
    text-align: center;
    /* 居中显示文本 */
    margin-top: 2%;
    color: #8d8787;
  }

  .footer div {
    width: 100%;
  }

  .footer span {
    color: #828384;
    font-size: larger;
    margin-left: 5%;
    margin-top: 5%;
    cursor: pointer;
  }

  .grid-container {
    display: grid;
    place-items: center;
    /* 等同于justify-items: center; align-items: center; */

  }
</style>